<template>
  <el-form label-position="top" class="bold-label form-border">
    <el-form-item label="删除群组">
      <el-button type="danger" @click="deleteGroup">删除群组</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'settings-advanced', // 高级设置
  computed: {
    ...mapState({ curGroup: 'currentGroup' }),
  },
  methods: {
    deleteGroup() {
      this.$msgbox({
        title: '删除群组',
        message: '确认删除此群组吗？',
        showCancelButton: true, // 显示取消按钮
        customClass: 'confirm-left',
        confirmButtonText: '确定',
        confirmButtonLoading: false,
        confirmButtonClass: 'el-button--danger',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false, // 不允许通过点击遮罩层关闭
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            Object.assign(instance, {
              confirmButtonLoading: true,
              confirmButtonText: '正在删除...',
            });
            this.$api.groups.delete(this.$route.params.groupId)
              .then(() => {
                this.$message.success('删除成功');
                this.$router.push(`/spaces/${this.curGroup.space.id}/groups`);
              })
              .catch(() => {})
              .then(() => done());
          } else done();
        },
      });
    },
  },
};
</script>

<style></style>
